<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css" rel="stylesheet">
        #box1{
            width: 80px;
            height: 80px;
            background-image: url("img/1.jpg");
            border: 1px solid red;
            border-radius: 100%;
        }
        #box2{
            width: 100px;
            height: 50px;
            border: 1px solid aqua;
            background-color: aqua;
            border-radius: 10px;
        }
        #box3{

            width: 80px;
            height: 30px;
            border: 1px solid aqua;
            background-color: aqua;
            border-radius: 0px 15px 15px 0px;
        }
        #box4{
             width: 80px;
            height:40px;
            border: 10px solid;
            line-height:40px;
            border-image:url("img/1.jpg")0 15 0 15;


        }
       
        #box5{
            width: 150px;
            height: 150px;
            border: 1px solid green;
            background-color: green;
           box-shadow:10px 10px 8px 0px grey;
        }
        #box6{
            width: 100px;
            height: 150px;
            border: 1px solid red ;
            background-image:url("img/1.jpg");
            background-size:100px 150px ;

        }
        #box7{
            width: 100px;
            height: 150px;
            border: 1px solid red ;
            background-image:url("img/1.jpg");
            background-size:cover;

        }
        #box8{
            width: 100px;
            height: 150px;
            border: 1px solid red ;
            background-color: aquamarine;
            background: no-repeat;
            background-image:url("img/1.jpg");
            background-size:contain ;

        }
        #box9{
            text-shadow: 2px 8px 1px green;
        }
        #box10{
            width: 200px;
            height: 200px;
            background-color: bisque;
            word-wrap: break-word;

        }
        @font-face {
            font-family: 'SingleMaltaRegular';
            src: url('font/shimesone_personal-webfont.eot');
            src: url('font/shimesone_personal-webfont.eot?#iefix') format('embedded-opentype'),
            url('font/shimesone_personal-webfont.woff') format('woff'),
            url('font/shimesone_personal-webfont.ttf') format('truetype'),
            url('font/shimesone_personal-webfont.svg#SingleMaltaRegular') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        #box11{
            font-size: 100px;
            font-family:'SingleMaltaRegular' ;
        }
    </style>
</head>
<body>
    <span>圆形</span>
    <div id="box1"></div>
    <span>圆角</span>
    <div id="box2"></div>
    <span>左上左下直角，右上右下圆角</span>
    <div id="box3"></div>
    <span>边框背景</span>
    <div id="box4">
        边框背景
    </div>
<span>盒子阴影</span>
<div id="box5"></div>
    <span>像素</span>
<div id="box6"></div>
    <span>conver</span>
    <div id="box7"></div>

    <span>contain</span>
    <div id="box8"></div>
    <span>文本阴影</span>
    <div id="box9">我是文本阴影</div>
<span>word-wrap</span>
<div id="box10">asdfghjlkjhgsdfjkhjskadjhfkshdkfhaskfhkl jfkdljsakfjksdjfksdjksfklsdkfjskd</div>
    <span>
        文字效果
    </span>
<div id="box11">
    this is name
</div>
</body>
</html>